import clock from '@/assets/clock.png';
import { getNewsList } from '@/services/center';
import { getNewUrl, useUrlParams } from '@/utils';
import { Button, Card, Col, Flex, Row, Skeleton, Tabs } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import { FormattedMessage, Helmet, Link, useIntl, useLocation } from 'umi';
//  新闻
const News: React.FC = () => {
  const intlParams = {
    page: 1,
    pageSize: 6,
  };
  const [pagePamras, setPagePamras] = useState(intlParams);
  const intl = useIntl();
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [isClick, setIsClick] = useState(false);
  const { page, pageSize } = pagePamras;
  const index = useUrlParams('index') || '1';
  const { search } = useLocation();
  const [data, setData] = useState<any[]>([]);
  const onChange = (page: number) => {
    setPagePamras({
      ...pagePamras,
      page,
    });
  };

  const list = [
    {
      key: '1',
      label: (
        <Link to={getNewUrl('/news?index=1')}>
          <FormattedMessage id="home.news_flash" />
        </Link>
      ),
    },
    {
      key: '2',
      label: (
        <Link to={getNewUrl('/news?index=2')}>
          <FormattedMessage id="home.investment_financing" />
        </Link>
      ),
    },
    {
      key: '3',
      label: (
        <Link to={getNewUrl('/news?index=3')}>
          <FormattedMessage id="home.finance_news" />
        </Link>
      ),
    },
  ];
  const [activeTab, setActiveTab] = useState();

  const refresh = (key: any) => {
    setData([]);
    setIsClick(false);
    setActiveTab(key as any);
    setTimeout(() => {
      setPagePamras(intlParams);
    }, 0);
  };
  useEffect(() => {
    setActiveTab(index as any);

    if (activeTab && index !== activeTab) {
      refresh(index);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [index, search]);

  const loadMoreData = async () => {
    const { pageSize, page } = pagePamras;
    if (page == 1) {
      setLoading(true);
    }
    try {
      const { data: msgList } = await getNewsList({
        p: page,
        s: pageSize,
        type: activeTab || index,
      });

      const { records, total } = msgList;
      setIsClick(false);
      setLoading(false);
      setTotal(total);
      setData([...data, ...records]);
    } catch {
      setLoading(false);
    }
  };
  useEffect(() => {
    loadMoreData();

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pagePamras]);

  const hasMore = total > pageSize * page;

  const number = hasMore ? pageSize : total % pageSize || pageSize;

  return (
    <>
      <Helmet>
        <title>{intl.formatMessage({ id: 'home.finace_meta_title' })}</title>
      </Helmet>
      <div className="news">
        <div className="common">
          <Tabs
            style={{ paddingTop: 19 }}
            activeKey={activeTab}
            onChange={(key) => {
              refresh(key);
            }}
            items={list}
            tabBarGutter={50}
          />
          <Card
            loading={loading}
            bordered={false}
            styles={{
              body: {
                padding: 0,
              },
            }}
            style={{
              minHeight: '50vh',
              padding: '41px 0 14vh 0',
              boxShadow: 'none',
              background: 'none',
            }}
          >
            {data.length > 0 ? (
              <>
                <Row gutter={[10, 20]}>
                  {data.map((item) => {
                    const { id, createdDate, surfaceDrawing, title } = item;
                    return (
                      <Col span={8} key={id}>
                        <Link to={getNewUrl(`/newsDetail/${id}`)}>
                          <Col style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>
                            <div>
                              <img
                                style={{
                                  width: '100%',
                                  borderRadius: '6px 6px 0 0',
                                }}
                                src={surfaceDrawing}
                                height={218}
                              />
                            </div>
                            <Col
                              style={{
                                background: '#fff',
                                padding: '12px 20px 25px ',
                                boxShadow:
                                  '0 1px 2px 0 rgba(0, 0, 0, 0.03),0 1px 6px -1px rgba(0, 0, 0, 0.02),0 2px 4px 0 rgba(0, 0, 0, 0.02)',
                                borderRadius: ' 0 0 6px 6px',
                                flex: 1,
                                display: 'flex',
                                flexDirection: 'column',
                              }}
                            >
                              <h1
                                style={{
                                  color: '#1D1D1F',
                                  fontWeight: 'bold',
                                  fontSize: 18,
                                  lineHeight: '28px',
                                  marginBottom: 16,
                                }}
                                title={title}
                              >
                                {title}
                              </h1>
                              <Flex
                                align="center"
                                style={{
                                  color: '#B2C8DA',
                                  fontSize: 16,
                                  marginTop: 'auto',
                                }}
                                gap={8}
                              >
                                <img width={16} src={clock} />
                                <div>{dayjs(createdDate).format('YYYY/MM/DD')}</div>
                              </Flex>
                            </Col>
                          </Col>
                        </Link>
                      </Col>
                    );
                  })}
                  {isClick
                    ? new Array(number).fill(Math.random()).map((item) => {
                        return (
                          <Col span={8} className="skeleton" key={item}>
                            <Skeleton.Input className="skeleton1" active={true} size="large" />
                            <Skeleton.Input className="skeleton2" active={true} size="large" />
                          </Col>
                        );
                      })
                    : null}
                </Row>

                {hasMore ? (
                  <Col
                    className="news_page"
                    style={{ marginTop: '40px', display: 'flex', justifyContent: 'center' }}
                  >
                    <Button
                      type="default"
                      className="news_btn"
                      onClick={() => {
                        onChange(page + 1);
                        setIsClick(true);
                      }}
                    >
                      {intl.formatMessage({ id: 'home.check_more' })}
                    </Button>
                  </Col>
                ) : null}
              </>
            ) : null}
          </Card>
        </div>
      </div>
    </>
  );
};

export default News;
